<template>
  <a-row :gutter="12">
    <a-col :xs="{ span: 24 }" :md="{ span: 12 }" :xl="{ span: 6 }">
      <icon-card
        icon="AreaChartOutlined"
        title="待付款订单111"
        :total="1000"
        :loading="loading"
        :icon-style="{ background: '#FFB800' }"
      ></icon-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :md="{ span: 12 }" :xl="{ span: 6 }">
      <icon-card
        icon="AreaChartOutlined"
        title="待发货订单"
        :total="1000"
        :loading="loading"
        :icon-style="{ background: '#32d65d' }"
      ></icon-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :md="{ span: 12 }" :xl="{ span: 6 }">
      <icon-card
        icon="AreaChartOutlined"
        title="待审核订单"
        :total="1000"
        :loading="loading"
        :icon-style="{ background: '#01AAED' }"
      ></icon-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :md="{ span: 12 }" :xl="{ span: 6 }">
      <icon-card
        icon="AreaChartOutlined"
        title="待结算订单"
        :total="1000"
        :loading="loading"
        :icon-style="{ background: '#FF5722' }"
      ></icon-card>
    </a-col>
  </a-row>
  <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
    <a-tabs default-active-key="1" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
      <a-tab-pane key="1" loading="true" tab="销售额">
        <a-row>
          <a-col :xl="{ span: 16 }" :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
            <chart-card />
          </a-col>
          <a-col :xl="{ span: 8 }" :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
            <rank-card title="门店销售排行榜" :list="rankData" />
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="访问量">
        <a-row>
          <a-col :xl="{ span: 16 }" :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
            <chart-card />
          </a-col>
          <a-col :xl="{ span: 8 }" :lg="{ span: 12 }" :md="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }">
            <rank-card title="门店销售排行榜" :list="rankData" />
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script name="home" lang="ts" setup>
import ChartCard from "@/components/card/ChartCard.vue";
import RankCard from "@/components/card/RankCard.vue";
const loading = ref<boolean>(false);
const rankData: Array<any> = [];
for (let i = 0; i < 7; i++) {
  rankData.push({
    name: "江北区 " + (i + 1) + " 号店",
    total: 1234.56 - i * 100
  });
}
</script>
<style lang="less" scoped>
.ant-col {
  padding-bottom: 12px;
}
</style>
